@import shared.VarTool
@(id: String, kind: String,tab:Option[String])
@mainWithSearch("Detail") {

	<style>

			.tab-pane {
				margin-top: 20px;
			}

			.form-horizontal .has-feedback .form-control-feedback {
				top: 0;
				right: -15px;
			}

	</style>

	<div class="panel panel-default">

		<div class="panel-heading">
			<h3 class="panel-title"> Detail : <span id="showName"></span></h3>
		</div>
	</div>

	<ul class="nav nav-tabs myMainUl">

		<li class="active">
			<a href="#summary" data-toggle="tab" > Summary</a>
		</li>

		<li class="" >
			<a href="#profile" data-toggle="tab" > Profile</a>
		</li>

		<li class="">
			<a href="#comparison" data-toggle="tab" aria-collapseed="false"> Comparison</a>
		</li>

	</ul>

	<div id="myTabContent" class="tab-content">

		<div class="tab-pane fade in active" id="summary" style="margin-top: 20px;">

			<table class="display table table-bordered" id="table" data-pagination="true" data-search="true"
			data-page-list="[10, 25, 50, 100, all]" data-multiple-search="true"
			style="word-wrap: break-word">
				<tbody></tbody>
			</table>

		</div>

		<div class="tab-pane " id="profile" style="margin-top: 20px;">

			<form class="form-horizontal" method="get" id="form">

				<input type="hidden" name="id" value="@id">

				<div class="form-group">
					<label class="control-label col-sm-2">Dataset selection:</label>
					<div class="col-sm-6">
						<select class="form-control" name="kinds[]" style="width: 100%">
						</select>
					</div>
					<button type="button" class="btn btn-default mySelectAll" id="search" style="margin-left: 10px">
						Select All</button>
				</div>

				<div class="form-group myLog2">
					<label class="control-label col-sm-2">Log<sub>2</sub>(<span class="pm"></span>+1):</label>
					<div class="col-sm-6 toggling">
						<input class="form-control myToggle" type="checkbox" checked data-toggle="toggle" data-on="yes"
						data-off="no" width="100%" name="logScale" value="T"
						>
					</div>
				</div>

				<div class="form-group">
					<div class="actions col-sm-offset-2 col-sm-3">
						<button type="button" class="btn btn-primary myRun" style="width: 90%;" id="search" >
							Run</button>
					</div>
				</div>

			</form>

			<hr>

			<div id="result" style="display: none">

				<h4 style="margin-top: 20px">Image Result</h4>

				<div class="myCharts" align="center">

					<div style="float: right">

						<a href="@routes.DetailController.downloadPlotData()?kind=@kind&id=@id"  class="btn  btn-default" title="Export data" >
						<i class="glyphicon glyphicon-export"></i>
						</a>

						<div class="btn-group" style="">
							<a class="btn  btn-default idsButton" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true" aria-expanded="false"
							>
								<i class="fa fa-bars"></i>
							</a>
							<ul class="dropdown-menu pull-right">

								<li>
									<a href="javascript:;" onclick="Tool.downloadImage(this, 'png')">
										Download PNG image
									</a>
								</li>

								<li>
									<a href="javascript:;" onclick="Tool.downloadImage(this, 'jpeg')">
										Download JPEG image
									</a>
								</li>
								<li>
									<a href="javascript:;" onclick="Tool.downloadImage(this, 'pdf')">
										Download PDF image
									</a>
								</li>
								<li>
									<a href="javascript:;" onclick="Tool.downloadImage(this, 'svg')">
										Download SVG image
									</a>
								</li>

							</ul>
						</div>

					</div>

					<input type="hidden" name="pdfBase64">
					<img src="" id="profileImage" style="width: 100%">
				</div>

			</div>

		</div>

		<div class="tab-pane " id="comparison">

			<form class="form-horizontal" method="get" id="form">

				<input type="hidden" name="id" value="@id">

				<div class="form-group">
					<label class="control-label col-sm-2">Dataset A:</label>
					<div class="col-sm-4">
						<select class="form-control" name="kindA" style="width: 100%">
						</select>
					</div>
					<label class="control-label col-sm-2">Dataset B:</label>
					<div class="col-sm-4">
						<select class="form-control" name="kindB" style="width: 100%">
						</select>
					</div>
				</div>

				<div class="form-group">

					<label class="control-label col-sm-2">Statistical test:</label>
					<div class="col-sm-4">
						<select class="form-control" name="method" >
							<option value="t.test">t.test</option>
							<option value="wilcox.test"> wilcox.test</option>
						</select>
					</div>
					<div class="myLog2">
						<label class="control-label col-sm-2">Log<sub>2</sub>(<span class="pm"></span>+1):</label>
						<div class="col-sm-4 toggling">
							<input class="form-control myToggle" type="checkbox" checked data-toggle="toggle" data-on="yes"
							data-off="no" width="100%" name="logScale" value="T"
							>
						</div>
					</div>

				</div>

				<div class="form-group">
					<div class="actions col-sm-offset-2 col-sm-3">
						<button type="button" class="btn btn-primary myRun" style="width: 90%;" id="search" >
							Run</button>
					</div>
				</div>
			</form>

			<hr>

			<div id="result" style="display: none" >

				<h4 style="margin-top: 20px">Image Result</h4>

				<div align="center">
					<div class="myCharts comparisonImage" align="center">

						<div style="float: right">

							<a href="@routes.DetailController.downloadPlotData()?kind=@kind&id=@id"  class="btn  btn-default" title="Export data" >
								<i class="glyphicon glyphicon-export"></i>
							</a>

							<div class="btn-group" >
								<a class="btn  btn-default idsButton" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true" aria-expanded="false"
								>
									<i class="fa fa-bars"></i>
								</a>
								<ul class="dropdown-menu pull-right">

									<li>
										<a href="javascript:;" onclick="Tool.downloadImage(this, 'png')">
											Download PNG image
										</a>
									</li>

									<li>
										<a href="javascript:;" onclick="Tool.downloadImage(this, 'jpeg')">
											Download JPEG image
										</a>
									</li>
									<li>
										<a href="javascript:;" onclick="Tool.downloadImage(this, 'pdf')">
											Download PDF image
										</a>
									</li>
									<li>
										<a href="javascript:;" onclick="Tool.downloadImage(this, 'svg')">
											Download SVG image
										</a>
									</li>

								</ul>
							</div>

						</div>

						<input type="hidden" name="pdfBase64">
						<img  src="" id="comparisonImage" >
					</div>
				</div>



			</div>

		</div>

	</div>

	<script>

			var id = "@id"
			var kind = "@kind"
			var tab = "@tab"

			$(document).ready(function () {

				DetailInfo.init

			})

	</script>
}